<template>
	<view>
		<view class="index-container">
			<div style="height:50rpx;"></div>
			<div class="header">
				<div class="back center" @click="back">
					<image src="/static/icon/back.png" mode="widthFix" class="w-20"></image>
				</div>
				{{$t('发货记录')}}
			</div>
			<div class="list-title">
				<p v-for="(item, index) in list" :class="{active: index==current}" @click="sectionChange(index)">{{ item }}</p>
			</div>
		</view>
		<view class="pt-220">
			<view v-for="item in orderInfo">
				<OrderInfo
					:keyValue="current"
					:allInfo = "item"
				/>
			</view>
			<div v-if="nomore" class="center text-gray-500 fz24 pt-20 pb-20">{{$t('没有更多了')}}</div>
		</view>
	</view>
</template>

<script>
	import OrderInfo from './components/orderInfo.vue'
	import { getDeliverySize, getDeliveryRecord } from '@/api/order.js'
	export default {
		components: {
			OrderInfo
		},
		data() {
			return {
				list: [this.$t('报价中'), this.$t('待执行'), this.$t('进行中'), this.$t('已完成'), this.$t('售后')],
				current: 0,
				orderInfo: [],
				params: {
					user_id: uni.getStorageSync("user_id"),
					page: 1,
					limit: 10,
					status: 1
				},
				nomore: false
			}
		},
		mounted(){
			this.getInfo()
		},
		created() {
			window.onNativeShow = this.getInfo;
		},
		onLoad(options) {
			if(options.status) {
				this.params.status = options.status
				this.current = options.status - 1 || 0
			}
			if (options.index) {
				this.params.status = options.index
				this.current = options.index - 1 || 0
			}
			this.getInfo(true)
		  },
		methods: {
			back() {
				this.cback()
			},
			//下拉刷新
			onPullDownRefresh() {
				this.getInfo(true)
			},
			//上拉加载
			onReachBottom() {
				this.params.page++
				this.getInfo()
			},
			sectionChange(index) {
				this.current = index
				this.params.status = index + 1
				this.orderInfo = []
				this.getInfo(true)
			},
			getInfo(init) {
				if (init) {
					this.params.page = 1
					this.nomore = false;
				}
				getDeliveryRecord(this.params).then(res => {
					if (res.data.code === 200) {
						if (this.params.page == 1) {
							this.orderInfo = res.data.data.data || []
						} else {
							this.orderInfo = [...this.orderInfo, ...res.data.data.data]
						}
						//{{$t('当前')}}请求的{{$t('列表')}}{{$t('是')}}空的 那就{{$t('是')}}{{$t('没有更多了')}}
						if (this.get(res, 'data.data.data').length == 0) {
							this.nomore = true;
						}
					}
					// 结束下拉刷新
					uni.stopPullDownRefresh()
				})
			},
			// getDetail(item) {
			// 	uni.navigateTo({
			// 		url: `/pages/shipmentRecord/sourceDeatil?item=${JSON.stringify(item)}`
			// 	})
			// }
		}
	}
</script>

<style lang="less">
	page{
		background-color: #F6F7FB;
	}
	.index-container {
		width: 100%;
		background: #F6F7FB url("/static/bg/backcolorImg.png") no-repeat top / 100%;
		position: fixed;
		z-index: 60;
	}
	.header {
		font-size: 34rpx;
		height: 100rpx;
		line-height: 100rpx;
		font-weight: bold;
		text-align: center;
		position: relative;
		padding-top: var(--status-bar-height);
		// padding-top: 18rpx;
	}
	.back {
		position: absolute;
		width: 70rpx;
		height: 70rpx;
		top: 15rpx;
	}
	.list-title {
		width: 100%;
		display: flex;
		justify-content: space-around;
		padding-left: 0;
		padding-top:28rpx;
		padding-bottom: 18rpx;
		p{
			height: 46rpx;
			font-size: 28rpx;
			color: #535353;
		}
		.active {
			font-size: 28rpx;
			color: #278AFF;
			font-weight: 600;
			border-bottom: 4rpx solid #278AFF;
		}
	}
</style>
